import React, { useState } from 'react'
import { Layout, Dropdown, Space } from 'antd'
import { withRouter } from 'react-router-dom' // 高阶组件
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  DownOutlined,
} from '@ant-design/icons';

const { Header } = Layout;
function TopHeader(props) {
  const [collapsed, setCollapsed] = useState(false)
  const changeCollapsed = () => {
    setCollapsed(!collapsed)
  }
  // const items = [
  //   {
  //     key: '1',
  //     label: (
  //       '退出登录'
  //     ),
  //   }
  // ];
  return (
    <Header
      style={{
        padding: '0 18px',
        background: 'white',
      }}
    >
      {
        collapsed ? <MenuUnfoldOutlined onClick={changeCollapsed} /> : <MenuFoldOutlined onClick={changeCollapsed} />
      }
      <div style={{ float: 'right' }}>
        <span></span>
        {/* <Dropdown
          menu={{
            items,
          }}
        >
          <a onClick={(e) => e.preventDefault()}>
            <Space>
              欢迎我回来
              <DownOutlined />
            </Space>
          </a>
        </Dropdown> */}
        <a onClick={() => {
          localStorage.removeItem('token')
          props.history.replace('/login')
        }}>
          <Space>
            退出登录
            <DownOutlined />
          </Space>
        </a>
      </div>
    </Header>
  )
}

export default withRouter(TopHeader)
